<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %>

<script type="text/javascript">
    function createLink() {
        window.location.href = "create.html?from=" + escape(window.location.href);
    }

    $(document).ready(function() {
        initDisplayMode();
        sort();
    });

    var userEnabled;

    function editUser() {
        if (userEnabled) {
            clickAction('edit');
        } else {
            $("div.error h3").html('This action not available; User has been disabled.');
        }
    }

    function itemClick(item, params, enabled) {
        $("div.data_tbody div").removeClass("active");
        $(item).addClass("active");
        itemParams = params;
        userEnabled = enabled;
    }
</script>

<!-- Menu -->
<jsp:include page="menu.jsp"/>

<!--START: conent -->
<div class="content">
    <div class="insider">

        <div class="search_box">
            <form action="search.html" method="get">
                <ul class="fl">
                    <li>
                        <select name="enabled">
                            <option value="">Status:All</option>
                            <option value="true" ${not empty param.enabled && param.enabled ? 'selected' : ''}>Enabled
                            </option>
                            <option value="false" ${not empty param.enabled && not param.enabled ? 'selected' : ''}>
                                Disabled
                            </option>
                        </select>
                    </li>

                    <li>
                        <security:authorize ifAnyGranted="ROLE_SYS_ADMIN">
                            <select name="groupName">
                                <option value="">Group:All</option>
                                <c:forEach var="group" items="${groups}">
                                    <c:if test="${group.name != 'ALL'}">
                                        <option value="${group.name}" ${group.name == param.groupName ? 'selected' : ''}>${group.name}</option>
                                    </c:if>
                                </c:forEach>
                            </select>
                        </security:authorize>
                    </li>
                    <li></li>
                    <li></li>

                    <li class="word_box">
                        <input type="text" id="keywords" name="keywords" onclick="searchClean(this)"
                               value="${not empty param.keywords ? param.keywords : 'Search by Keywords...'}"/>
                    </li>
                </ul>

                <ul class="fr">
                    <li>
                        <input type="image" class="btn" onclick="searchClean($('#keywords'))"
                               src="<%= request.getContextPath()%>/images/btn/btn_search3.gif"/>
                    </li>
                </ul>
            </form>
        </div>

        <div class="error">
            <h3>
                ${foundMessage}
                ${empty message ? '' : '<br />'}${message}</h3>

            <div class="display_mode">
                <h4>Display mode:</h4>
                <ul>
                    <li id="brief" onclick="briefMode();"><a href="#">Brief</a></li>
                    <li id="full" class="active" onclick="fullMode();"><a href="#">Full</a></li>
                </ul>
            </div>
        </div>

        <ul class="functions2">
            <li class="fr">
                <a id="createLink" href="#" onclick="createLink()" class="retire">
                    <img src="<%= request.getContextPath()%>/images/btn/btn_create_new.gif" alt="text" class="btn"/>
                </a>
            </li>
            <li>
                <a href="#" onclick="clickAction('view')">
                    <img src="<%=request.getContextPath()%>/images/btn/functions2/btn_view.gif" alt="view" class="btn"/>
                </a>
            </li>

            <li>
                <a href="#" onclick="editUser()">
                    <img src="<%=request.getContextPath()%>/images/btn/functions2/btn_edit.gif" alt="view" class="btn"/>
                </a>
            </li>
            <li>
                <a href="#" onclick="clickAction('changestatus')">
                    <img src="<%=request.getContextPath()%>/images/btn/functions2/enable_disable.gif" alt="view"
                         class="btn"/>
                </a>
            </li>
        </ul>

        <table width="100%" cellspacing="0" class="data_thead">
            <thead>
            <tr>
                <th width="15%" column="username"
                    class="${(param.sortColumn == 'username' and param.sortBy=='asc')?'id_move_up' : (param.sortColumn == 'username' and param.sortBy=='desc')?'id':''} sort">
                    ID
                </th>
                <th width="15%" column="enabled"
                    class="${(param.sortColumn == 'enabled' and param.sortBy=='asc')?'id_move_up' : (param.sortColumn == 'enabled' and param.sortBy=='desc')?'id':''} sort">
                    Status
                </th>
                <th width="35%" column="firstname"
                    class="${(param.sortColumn == 'firstname' and param.sortBy=='asc')?'id_move_up' : (param.sortColumn == 'firstname' and param.sortBy=='desc')?'id':''} sort">
                    Name
                </th>
                <th width="35%" column="userGroup.name"
                    class="${(param.sortColumn == 'userGroup.name' and param.sortBy=='asc')?'id_move_up' : (param.sortColumn == 'userGroup.name' and param.sortBy=='desc')?'id':''} end sort">
                    Group
                </th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <div id="dataList" class="data_tbody">
            <c:forEach var="user" items="${users}">
                <div onclick="itemClick(this, 'username=${user.username}', ${user.enabled});"
                     onmouseover="itemHover(this);"
                     onmouseout="itemMouseOut(this);">
                    <table width="100%" cellspacing="0" class="data_tbody_title">
                        <tbody>
                        <tr>
                            <td width="15%" class="id_number">${user.username}</td>
                            <td width="15%">
                                <c:if test="${user.enabled}">Enabled</c:if>
                                <c:if test="${not user.enabled}">Disabled</c:if>
                            </td>
                            <td width="35%">${user.firstname} ${user.lastname}</td>
                            <td width="35%">${user.userGroup.name}</td>
                        </tr>
                        <tr>
                            <td colspan="5" class="tro"></td>
                        </tr>
                        </tbody>
                    </table>
                    <table width="726" border="0" cellspacing="0" class="tro">
                        <tr>
                            <td width="298">Email: <strong>${user.email}</strong></td>
                            <td colspan="2" class="end">Permissions:
                                    ${user.permissionsInfo}
                            </td>
                        </tr>
                    </table>
                </div>
            </c:forEach>
        </div>
        <!-- Pagination -->
        <%@include file="../../template/pager.jsp" %>
    </div>
</div>
<!--END: conent -->
<!--START: Footer -->
<div class="footer"></div>